{% extends "admin/base_site.html" %}
{% load i18n admin_urls static admin_list tree_filter_change_list %}

{% block extrastyle %}
    {{ block.super }}
    <link rel="stylesheet" href="{% static "admin/plugins/datatables/dataTables.bootstrap.css" %}">
    {% if cl.formset or action_form %}
        <script type="text/javascript" src="{% url 'admin:jsi18n' %}"></script>
    {% endif %}
    {{ media.css }}
    {% if not actions_on_top and not actions_on_bottom %}
        <style>
            #changelist table thead th:first-child {
                width: inherit
            }
        </style>
    {% endif %}
{% endblock %}

{% block extrahead %}
    {{ block.super }}
    {{ media.js }}
{% endblock %}

{% block bodyclass %}{{ block.super }} app-{{ opts.app_label }} model-{{ opts.model_name }} change-list{% endblock %}

{% if not is_popup %}
    {% block breadcrumbs %}
        <ol class="breadcrumb">
            <li><a href="{% url 'admin:index' %}"><i class="fa fa-dashboard"></i> {% trans 'Home' %}</a></li>
            <li><a href="javascript:void(0)">{{ cl.opts.app_config.verbose_name }}</a></li>
            <li class="active">{{ cl.opts.verbose_name_plural|capfirst }}</li>
        </ol>
    {% endblock %}
{% endif %}

{% block content_title %} {{ cl.opts.verbose_name_plural|capfirst }} {% endblock %}

{% block coltype %}flex{% endblock %}

{% block content %}


    <div class="row">
        <div class="col-md-12">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h4 class="box-title">
                        {{ title }}{% block pretitle %}{% endblock %}
                    </h4>
                </div>

                <div class="box-body">
                    <div id="content-main" style="height: 100%">
                        {% if cl.formset and cl.formset.errors %}
                            <p class="errornote">
                                {% if cl.formset.total_error_count == 1 %}
                                    {% trans "Please correct the error below." %}{% else %}
                                    {% trans "Please correct the errors below." %}{% endif %}
                            </p>
                            {{ cl.formset.non_form_errors }}
                        {% endif %}
                        <div class="row" style="height: 100%">
                            {% has_tree_filter cl.filter_specs as has_tree %}
                            {% if has_tree %}
                                <div class="col-xs-4 col-md-2" style="height: 100%">
                                    {% render_tree_filter cl %}
                                </div>
                            {% endif %}
                            <div class="module{% if cl.has_filters %} filtered{% endif %} col-xs-16 col-md-10"
                                 id="changelist">
                                <div class="row" style="margin-bottom: 15px;">
                                    {% block search %}
                                        <div class="col-md-10 col-sm-12 col-xs-12" id="toolbar">
                                            {% tree_search_form cl %}
                                        </div>
                                    {% endblock %}

                                    {% block object-tools %}
                                        <div {% if cl.has_filters or cl.search_fields %}
                                            class="col-md-2 col-sm-12 col-xs-12 text-right"
                                            {% else %}class="col-md-12 text-right"{% endif %}>
                                            {% block object-tools-items %}
                                                {% change_list_object_tools %}
                                            {% endblock %}
                                        </div>
                                    {% endblock %}
                                </div>

                                <div class="row">
                                    {% block date_hierarchy %}{% if cl.date_hierarchy %}{% date_hierarchy cl %}
                                    {% endif %}{% endblock %}
                                </div>


                                <form id="changelist-form" method="post"{% if cl.formset and cl.formset.is_multipart %}
                                      enctype="multipart/form-data"{% endif %} novalidate>{% csrf_token %}
                                    {% if cl.formset %}
                                        <div>{{ cl.formset.management_form }}</div>
                                    {% endif %}

                                    {% block result_list %}
                                        {% if action_form and actions_on_top and cl.show_admin_actions %}
                                            {% admin_actions %}{% endif %}
                                        {% result_list cl %}
                                        {% if action_form and actions_on_bottom and cl.show_admin_actions %}
                                            {% admin_actions %}{% endif %}
                                    {% endblock %}
                                    {% block pagination %}{% pagination cl %}{% endblock %}
                                </form>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <br class="clear"/>
        </div>
    </div>


{% endblock %}

{% block extrajs %}
    <script src="{% static "admin/plugins/datatables/jquery.dataTables.min.js" %}"></script>
    <script src="{% static "admin/plugins/datatables/dataTables.bootstrap.min.js" %}"></script>

    <script>
        $.fn.search_filters = function () {
            $(this).change(function () {
                var $field = $(this);
                var $option = $field.find('option:selected');
                var select_name = $option.data('name');
                if (select_name) {
                    $field.attr('name', select_name);
                } else {
                    $field.removeAttr('name');
                }
            });
            $(this).trigger('change');
        };

        $('.search-filter').search_filters();

    </script>

{% endblock %}
